<template>
  <div class="app-container">
    <!-- <div class="search-container">
      <el-form ref="form" :model="queryParams" :inline="true">
        <el-form-item>
          <el-button type="primary" @click="handleQuery" icon="el-icon-search">搜索</el-button>
          <el-button type="warning" @click="openSearchDialog()"><i class="el-icon-mouse"></i> 高级查询</el-button>
          <el-button @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>

    </div> -->

    <el-card shadow="never">
      <!-- <template #header>
        <el-button type="success" @click="openDialog()"
          ><i class="el-icon-circle-plus"></i> 新增</el-button>
        <el-button
          type="danger"
          :disabled="ids.length === 0"
          @click="handleDelete()"
          ><i class="el-icon-delete"></i> 删除</el-button>
      </template> -->

      <el-table v-loading="loading" :data="dataList" highlight-current-row border @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column label="序号" width="55" prop="dataIndex"/>
        <el-table-column label="样本类型" prop="typeText"/>
        <el-table-column label="样本名称" prop="name"/>
        <el-table-column label="样本分组" prop="group"/>
        <el-table-column label="样本编号" prop="number"/>
        <el-table-column label="用户" prop="userName"/>
        <el-table-column fixed="right" label="操作"  min-width="140" width="140">
          <template #default="scope">
            <el-button type="warning" size="small" link @click="cancelDetection(scope.row)"><i class="el-icon-edit"></i> 取消检测</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="queryParams.pageNum"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="10"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </div>
    </el-card>
  </div>
</template>

<script>

import seqSampleApi from '@/api/sequence/seqSample'
import seqProjectApi from '@/api/sequence/project'
import { formatDate } from '@/utils/formatTime'
import qs from 'qs';
export default {
	name: 'seqDataIndex',
	data() {
		return {
			queryParams: {
        pageNum: 0,
        pageSize: 10,
        criteriaVos: [{
          name: 'detection',
          searchType: 'EQUAL',
          searchVal: '1'
        }],
      },
      total: 0,
      loading: false,
      dataList: [],
      ids: [],
      typeMap: {'PUBLICATION': '测序样本', 'SCIENTIFIC_RESEARCH': '科研样本', 'REPORT': '报告样本'},
      speciesMap: {
        human: '人类',
        hat: '小鼠',
        mouse: '大鼠',
      },
		};
	},
  methods: {
    cancelDetection (row) {
      seqSampleApi.setDetection(row.id, false).then(res => {
        this.$message({message: '取消成功！', type: 'success'});
        this.handleQuery();
      })
    },
    handleQuery() {
      this.loading = true;
      seqSampleApi.page({
        number: this.queryParams.pageNum,
        size: this.queryParams.pageSize,
        criteriaVos: this.queryParams.criteriaVos,
      }).then((res) => {
        let data = res.data;
        let that = this;
        let index = 1
        data.content.forEach((v) => {
          v.dataIndex = index++;
          v.layoutText = v.layout ? (v.layout === 'PAIRED' ? '双端测序' : '单端测序') : '-';
          v.typeText = that.typeMap[v.type];
          v.speciesText = that.speciesMap[v.species];
        });
        this.dataList = data.content;
        
        this.total = data.count;
        this.loading = false;
      }).catch(() => {});
    },
    
    
    handleSelectionChange(val) {
      this.ids = [];
      val.forEach(v => {
        this.ids.push(v.id);
      });
    },
    handleSizeChange(val) {
      this.queryParams.pageSize = val;
      this.handleQuery();
    },
    handleCurrentChange(val) {
      this.queryParams.pageNum = val;
      this.handleQuery();
    },
  },
  created() {
    this.handleQuery();
  }
};
</script>

<style scoped>
.el-pagination {
  margin-top: 10px;
  float: right;
  margin-bottom: 10px;
}
/deep/.demo-table-expand {
  font-size: 0;
}
/deep/.demo-table-expand label {
  width: 8%;
  margin-left: 10px;
  color: #99a9bf;
}
/deep/.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 80%;
}
</style>